<!DOCTYPE HTML>
<html>
 <head>
  <title> 表单代码结构</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
   <link href="../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
    code {
      padding: 0px 4px;
      color: #d14;
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
    }
   </style>
 </head>
 <body>
  
    
    <div class="container">
     <div class="row">
       <div class="span4">
         <h2>整体结构</h2>
         <ol>
           <li>页面声明</li>
           <li>资源文件</li>
           <li>搜索表单</li>
           <li>引入JS</li>
           <li>初始化搜素页</li>
           <li>表格操作</li>
         </ol>
       </div>
       <div class="span20">
         <pre class="prettyprint linenums">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt; 搜索表单&lt;/title&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;
  
  &lt;div class="container"&gt;

    &lt;form id="searchForm" class="form-horizontal"&gt;
      &lt;div class="row"&gt;
        &lt;div class="control-group span8"&gt;
          &lt;label class="control-label"&gt;学生编号：&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class="control-text" name="id"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group span8"&gt;
          &lt;label class="control-label"&gt;学生姓名：&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class="control-text" name="stuName"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="control-group span8"&gt;
          &lt;label class="control-label"&gt;性别：&lt;/label&gt;
          &lt;div class="controls" &gt;
            &lt;select name="" id="" name="sex"&gt;
              &lt;option value=""&gt;男&lt;/option&gt;
              &lt;option value=""&gt;女&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row"&gt;
        &lt;div class="control-group span9"&gt;
          &lt;label class="control-label"&gt;入学时间：&lt;/label&gt;
          &lt;div class="controls"&gt;
            &lt;input type="text" class=" calendar" name="startDate"&gt;&lt;span&gt; - &lt;/span&gt;&lt;input name="endDate" type="text" class=" calendar"&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="span3 offset2"&gt;
          &lt;button  type="button" id="btnSearch" class="button button-primary"&gt;搜索&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;

    &lt;div class="search-grid-container"&gt;
      &lt;div id="grid"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../assets/js/bui-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../assets/js/config-min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
  BUI.use(['common/search','common/page'],function (Search) {
    
    var enumObj = {"1":"男","0":"女"},
      columns = [
          {title:'学生编号',dataIndex:'id',width:80,renderer:function(v){
            return Search.createLink({
              id : 'detail' + v,
              title : '学生信息',
              text : v,
              href : 'detail/example.html'
            });
          }},
          {title:'学生姓名',dataIndex:'name',width:100},
          {title:'生日',dataIndex:'birthday',width:100,renderer:BUI.Grid.Format.dateRenderer},
          {title:'学生性别',dataIndex:'sex',width:60,renderer:BUI.Grid.Format.enumRenderer(enumObj)},
          {title:'学生班级',dataIndex:'grade',width:100},
          {title:'学生家庭住址',dataIndex:'address',width:300},
          {title:'操作',dataIndex:'',width:200,renderer : function(value,obj){
            var editStr =  Search.createLink({ //链接使用 此方式
                id : 'edit' + obj.id,
                title : '编辑学生信息',
                text : '编辑',
                href : 'search/edit.html'
              }),
              delStr = '&lt;span class="grid-command btn-del" title="删除学生信息"&gt;删除&lt;/span&gt;';//页面操作不需要使用Search.createLink
            return editStr + delStr;
          }}
        ],
      store = Search.createStore('../data/student.json'),
      gridCfg = Search.createGridCfg(columns,{
        tbar : {
          items : [
            {text : '&lt;i class="icon-plus"&gt;&lt;/i&gt;新建',btnCls : 'button button-small',handler:function(){alert('新建');}},
            {text : '&lt;i class="icon-edit"&gt;&lt;/i&gt;编辑',btnCls : 'button button-small',handler:function(){alert('编辑');}},
            {text : '&lt;i class="icon-remove"&gt;&lt;/i&gt;删除',btnCls : 'button button-small',handler : delFunction}
          ]
        },
        plugins : [BUI.Grid.Plugins.CheckSelection] // 插件形式引入多选表格
      });

    var  search = new Search({
        store : store,
        gridCfg : gridCfg
      }),
      grid = search.get('grid');
    //删除操作
    function delFunction(){
      var selections = grid.getSelection();
      delItems(selections);
    }

    function delItems(items){
      var ids = [];
      BUI.each(items,function(item){
        ids.push(item.id);
      });

      if(ids.length){
        BUI.Message.Confirm('确认要删除选中的记录么？',function(){
          $.ajax({
            url : '../data/del.php',
            dataType : 'json',
            data : {ids : ids},
            success : function(data){
              if(data.success){ //删除成功
                search.load();
              }else{ //删除失败
                BUI.Message.Alert('删除失败！');
              }
            }
        });
        },'question');
      }
    }

    //监听事件，删除一条记录
    grid.on('cellclick',function(ev){
      var sender = $(ev.domTarget); //点击的Dom
      if(sender.hasClass('btn-del')){
        var record = ev.record;
        delItems([record]);
      }
    });
  });
&lt;/script&gt;

&lt;body&gt;
&lt;/html&gt;  

         </pre>
       </div>
     </div>
     <div class="row">
       <div class="span24">
         <h2>几点说明</h2>
         <ol>
           <li>文档声明为 <code>&lt;!doctype html&gt;</code>,文件格式是utf-8</li>
           <li>css文件在 title中引入，js在页面底部引入</li>
           <li>页面引入的 prettify.js和prettify.css仅是为了展示代码使用</li>
         </ol>
       </div>
     </div>
    </div>

  <!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
  <script type="text/javascript" src="../assets/js/prettify.js"></script>
  <script type="text/javascript">
    //$(function () {
      prettyPrint();
    //});
  </script>  

<body>
</html>  